<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<%@include file="/views/common/include/taglib.jsp"%>
<script src="${ctx}/js/controllers/property/feebill/payBill.js"
	type="text/javascript"></script>
<link rel="stylesheet" href="${ctx}/css/page/header2.css"
	type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/reset.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/leftList.css"
	type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/jiaofei.css"
	type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/footer.css" type="text/css">
</head>
<body>
	<script type="text/javascript">
		var ctx = '${ctx}';
	</script>
	<div id="first">
		<div class="nav-list">
			<ul>
				<li onclick="goToMyBill();"><img src="${ctx }/images/wuye/wy3.png" />我的账单
					<div class="bottom-box "></div></li>
				<li onclick="gotoPayBill();"><img
					src="${ctx }/images/wuye/wy2.png" />我要缴费
					<div id="show-box" class="bottom-box "></div></li>
				<li onclick="gotoBillRecords();"><img
					src="${ctx }/images/wuye/wy4.png" />缴费记录
					<div class="bottom-box"></div></li>
			</ul>
		</div>
		<div class="payment-info-box">
			<div class="payment">
				<table class="table-pay">
				    <tr>
						<td>缴费：</td>
						<td class="right-td"><input class="input-text" onblur="checkMonths();" type="text"id="months" placeholder="月数"/>
						</td>
					</tr>
					<tr>
						<td>房屋：</td>
						<td class="right-td">
							<div class="btn-group">
								<select class="dropdown-menu" id="houseId" onchange="init()" style="width:300px;">
								<option value="" selected="selected" >--请选择房屋--</option> 
									<c:forEach items="${houses}" var="item" varStatus="cStatus">
										<option value="${item.id}" <c:if test="${houseId == item.id }">selected="selected" </c:if>>${item.fullName}</option>
									</c:forEach>
								</select>
							</div>
						</td>
					</tr>
					<tr>
						<td>房屋面积：</td>
						<td class="right-td" id="houseArea"></td>
					</tr>
					<tr>
						<td>物业费单价：</td>
						<td class="right-td" id="propertyBill" >
						</td>
					</tr>
					<tr>
						<td>缴费区间：</td>
						<td class="right-td" id="payMoneyArea">
						</td>
					</tr>
					<tr >
						<td></td>
						<td class="right-td" style="padding:0px"><span class="invoice" style="float:right;"><a href="#">发票须知</a></span></td>
					</tr>
					<tr>
						<td>抬头发票：</td>
						<td class="right-td"><input class="input-text" type="text" id="billTitle"
							value=""></input></td>
					</tr>
					<tr>
						<td></td>
						<td class="right-td btn-right"><button class="submit" onclick="saveManagementBill()">确定</button>
							<span ><a href="#" class="payMoneyExplain" ><img src="${ctx }/images/wuye/wy5.png">&nbsp;缴费说明</a></span>
						</td>
					</tr>
				</table>
			</div>
			<div class="payment-info">
				<p>
					<img src="${ctx }/images/wuye/wy6.png">&nbsp;&nbsp;友情提示：&nbsp;&nbsp;如有需要相关票据，请于3个工作日之后一个月之内到我物业管理处领取。
				</p>
				<p><em style="color: #FCB890;margin-right: 5px;">*</em>感谢您对D生活的理解和支持！</p>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function goToMyBill() {
			parent.window.location.href = ctx + "/propertyBill/getMyBill";
		}
		function gotoPayBill() {
			$('#first').load(ctx + "/propertyBill/getPayBillInfo？houseId="+"");
		}
		function gotoBillRecords() {
			$('#first').load(ctx + "/propertyBill/propertyFeePaymentList");
		}
	</script>
</body>
</html>